<template>
  <view class="contact-box">
	  <view id="top-info" class="tn-footerfixed tn-safe-area-inset-bottom tn-bg-white" :style="{transform: `translateY(${topInfoTranslateY}px)`}">
	  	<view class="tn-flex tn-flex-row-between tn-flex-col-center">
	  	  <view class="tn-flex-3 justify-content-item tn-padding-top-sm tn-padding-bottom-sm tn-text-center" @tap.stop="openSkuModal(1)">
	  		<tn-button shape="round" backgroundColor="tn-main-gradient-blue" padding="38rpx 0" width="80%" :fontSize="30" shadow>
	  		  <text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
	  			联系客服
	  		  </text>
	  		</tn-button>
	  	  </view>
	  	  <view class="tn-flex-3 justify-content-item tn-padding-top-sm tn-padding-bottom-sm tn-text-center" @tap.stop="call(conractInfo.contactNumber.filePath)">
	  		<tn-button shape="round" backgroundColor="tn-main-gradient-red" padding="38rpx 0" width="80%" :fontSize="30" shadow>
	  		  <text class="tn-color-white" hover-class="tn-hover" :hover-stay-time="150">
	  			合作热线
	  		  </text>
	  		</tn-button>
	  	  </view>
	  	</view>
	  </view>
	  <!-- 选择弹框 -->
	  <view class="wx-modal" v-show="showSkuModal">
			<view
				class="wam__mask"
				@touchmove.prevent=""
				@tap.stop="showSkuModal=false"
			></view>
			<view class="wam__wrapper">
				<!-- 关闭按钮 -->
				<view class="wam__close-btn" @tap.stop="showSkuModal=false">
				  <text class="tn-icon-close"></text>
				</view>
				<!-- 微信二维码弹窗 -->
				<view v-if="contactShowType==1" class="tn-flex tn-flex-direction-column tn-flex-center">
					<view>微信咨询（长按扫码）</view>
					<image :src="conractInfo.wxQrCode.filePath" mode="aspectFit" style="width: 100%;" show-menu-by-longpress></image>
				</view>
				<!-- 联系电话 -->
				<view v-if="contactShowType==2" class="tn-flex tn-flex-row-between tn-flex-col-center">
					<view class="tn-flex tn-flex-col-center tn-flex-row-center concat-us-iphone" @click="call(conractInfo.contactNumber.filePath)">
						<text class="tn-icon-tel-circle-fill phone-icon"></text>电话咨询（点击）：<text class="phone-number">{{conractInfo.contactNumber.filePath}}</text>
					</view>
				</view>
			</view>
	  </view>
  </view>
</template>

<script>
  export default {
	components: {
	},
    options: {
      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
      virtualHost: true
    },
	props: {
	  scrollTop: {
	    type: Number,
	    default: 0
	  }
	},
    data() {
      return {
		  showSkuModal:false,
		  contactShowType:1,
		  conractInfo:{contactNumber:{},wxQrCode:{}},
		  topInfo: {
		    height: 0,
		  },
		  topInfoTranslateY: 0,
		  prevScrollTop: 0
      }
    },
	onReady() {
	  this.getTopInfoRect()
	  this.getContactInfo()
	},
	watch:{
		scrollTop:{
			handler(){
				this.handlePageScroll()
			}
		}
	},
    methods: {
      // 打开选择弹框
      openSkuModal(type) {
		this.contactShowType=type
        this.showSkuModal = true
      },
	  async getContactInfo() {
	  	this.conractInfo = await this.$t.api.contactInfos(); 
	  },
      // 获取顶部销售信息容器相关信息
      getTopInfoRect() {
        this._tGetRect('#top-info').then((res) => {
          if (!res) {
            setTimeout(() => {
              this.getTopInfoRect()
            }, 50)
            return
          }
          this.topInfo.height = res.height
        })
      },
      // 处理页面滚动事件
      handlePageScroll() {
        if (this.prevScrollTop > this.scrollTop) {
         
        // 内容下滑，即手指从下往上滚
         this.topInfoTranslateY = 0
        } else {
        // 内容上滑，即手指从上往下滚
          if (this.scrollTop > this.topInfo.height) {
            this.topInfoTranslateY = this.topInfo.height
          }
        }
        this.prevScrollTop = this.scrollTop
      },
	  call(phone) {
	  	uni.makePhoneCall({
	  		phoneNumber: phone
	  	})
	  },
    }
  }
</script>

<style lang="scss" scoped>
  .contact-box{
	.concat-us-iphone{
		background-image: repeating-linear-gradient(45deg, #c2dff9, #4b90df);
		color: #fff;
		height: 60rpx;
		font-size: 32rpx;
		padding: 20rpx 30rpx;
		font-size: 34rpx;
		.phone-icon{
			font-size: 60rpx;
		}
		.phone-number{
			font-size: 38rpx;
		}
	}
	  /* 底部*/
	  .tn-footerfixed {
	    position: fixed;
	    background-color: rgba(255,255,255,0.5);
	    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	    bottom: 0;
	    width: 100%;
	    transition: all 0.25s ease-out;
	    will-change: transform;
	    z-index: 100;
	  }
	  
	  /* 底部 start*/
	  .footerfixed{
	   position: fixed;
	   width: 100%;
	   bottom: 0;
	   z-index: 999;
	   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	  }
	  
	  .wam {
	      /* mask */
	      &__mask {
	        position: absolute;
	        left: 0;
	        top: 0;
	        width: 100%;
	        height: 100%;
	        background-color: rgba(0, 0, 0, 0.5);
	        opacity: 0;
	        animation: showMask 0.25s ease 0.1s forwards;
	      }
	      
	      /* close-btn */
	      &__close-btn {
	        position: absolute;
	        top: 30rpx;
	        right: 30rpx;
	        z-index: 99999;
	        font-size: 40rpx;
	      }
	      
	      /* wrapper */
	      &__wrapper {
	        position: absolute;
	        left: 0;
	        bottom: 0;
	        width: 100%;
	        background-color: #FFFFFF;
	        border-radius: 20rpx 20rpx 0rpx 0rpx;
	        padding: 40rpx;
	        padding-top: 60rpx;
	        padding-bottom: 40rpx;
	        padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
	        padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
	        transform-origin: center bottom;
	        transform: scaleY(0);
	        animation: showWrapper 0.25s ease 0.1s forwards;
	        z-index: 99999;
	      }
	    }
	  .tn-btn-hover-class {
	    box-shadow: inset 10rpx 2rpx 40rpx 0rpx rgba(0, 0, 0, 0.05);
	  }
	  
	  @keyframes showMask {
	    0% {
	      opacity: 0;
	    }
	    100% {
	      opacity: 1;
	    }
	  }
	  @keyframes showWrapper {
	    0% {
	      transform: scaleY(0);
	    }
	    100% {
	      transform: scaleY(1);
	    }
	  }
	  
  }
</style>